<template>
  <el-table
    :loading="loading"
    :data="blogList"
    style="width: 100%"
    :expand-row-keys="expandRowKeys"
    row-key="id"
    @expand-change="expandChange"
  >
    <blog-list-table-expand/>
    <el-table-column
      label=""
      prop="provenance"
      min-width="30px"
    >
      <template slot-scope="props">
        <el-tag v-if="props.row.provenance === 0" size="mini" effect="dark" type="success">原</el-tag>
        <el-tag v-if="props.row.provenance === 1" size="mini" effect="dark" type="danger">转</el-tag>
        <el-tag v-if="props.row.provenance === 2" size="mini" effect="dark" type="warning">翻</el-tag>
        <el-tag v-if="props.row.state === 1" size="mini" effect="dark" type="danger">置顶</el-tag>
        <el-tag v-if="props.row.state === 2" size="mini" effect="dark" type="warning">加精</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="作者"
      prop="author"
      align="center"
      width="80px"
    />
    <el-table-column
      label="文章名"
      prop="title"
      max-width="100px"
    >
      <template slot-scope="props">
        <el-tooltip :content="props.row.title" placement="top">
          <span class="ellipsis">
            {{ props.row.title }}
          </span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      label="摘要"
      prop="summary"
      align="left"
      min-width="200px"
    >
      <template slot-scope="props">
        <el-tooltip :content="props.row.summary" placement="top">
          <span class="ellipsis">
            {{ props.row.summary }}
          </span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      label="可见"
      align="center"
      width="100px"
    >
      <template slot-scope="props">
        <el-tag v-if="props.row.visibleStrategy === 0" size="mini" effect="dark" type="success">所有人</el-tag>
        <el-tag v-if="props.row.visibleStrategy === 1" size="mini" effect="dark" type="danger">粉丝</el-tag>
        <el-tag v-if="props.row.visibleStrategy === 2" size="mini" effect="dark" type="warning">付费</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="发布状态"
      align="center"
      width="100px"
    >
      <template slot-scope="props">
        <state-point :state="props.row.isPublish"/>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      fixed="right"
      align="center"
    >
      <template slot-scope="scope">
        <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        编辑<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="scope.row.isPublish === 0" icon="el-icon-close"
                              @click="handlePublish(scope.$index, scope.row)">取消发布
            </el-dropdown-item>
            <el-dropdown-item v-else icon="el-icon-refresh-right" @click="handlePublish(scope.$index, scope.row)">发布
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.state !== 1" icon="el-icon-upload2"
                              @click="handleState(scope.$index, scope.row)">置顶
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.state === 1" icon="el-icon-upload2"
                              @click="handleState(scope.$index, scope.row)">取消置顶
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.state !== 2" icon="el-icon-star-off"
                              @click="handleState(scope.$index, scope.row)">加精
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.state === 2" icon="el-icon-star-off"
                              @click="handleState(scope.$index, scope.row)">取消加精
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.visibleStrategy !== 0" icon="el-icon-full-screen"
                              @click="handleState(scope.$index, scope.row)">所有人
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.visibleStrategy !== 1" icon="el-icon-price-tag"
                              @click="handleState(scope.$index, scope.row)">粉丝
            </el-dropdown-item>
            <el-dropdown-item v-if="scope.row.visibleStrategy !== 2" icon="el-icon-goods"
                              @click="handleState(scope.$index, scope.row)">付费
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

import {provenance} from '@/assets/enums/provenance'
import {queryBlogList} from '@/api/blog/blog'
import BlogListTableExpand from '@/views/blog/list/table/expand'
import StatePoint from '@/views/blog/list/table/point'

export default {
  name: 'BlogListTable',
  components: {StatePoint, BlogListTableExpand},
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    totalSize: {
      type: Number,
      default: 0
    },
    params: {
      type: Object,
      default: null
    }

  },
  data() {
    return {
      blogList: [],
      expandRowKeys: [],
      page: {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      },
      pTotalSize: 0,
      loading: true
    }
  },
  watch: {
    'currentPage': function (n, o) {
      this.page.currentPage = n
      this.queryBlogList()
    },
    'pageSize': function (n, o) {
      this.page.pageSize = n
      this.queryBlogList()
    },
    'params': function (n, o) {
      this.queryBlogList()
    },
    pTotalSize: function (n, o) {
      this.$emit('update:totalSize', n)
    }
  },
  created() {
    this.queryBlogList()
  },
  methods: {
    queryBlogList() {
      const param = {
        pageInfo: {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize
        },

      }
      if (this.params.title && this.params.title !== '') {
        param.keyWords = this.params.title
      }
      if (this.params.provenance && this.params.provenance !== '') {
        param.provenance = this.params.provenance
      }
      if (this.params.categories && this.params.categories !== '') {
        param.categories = this.params.categories
      }
      if (this.params.tags && this.params.tags !== '') {
        param.tags = this.params.tags
      }
      if (this.params.date[0] != null) {
        param.date = {
          startDate: this.buildDate(this.params.date[0]),
          endDate: this.buildDate(this.params.date[1])
        }
      }
      queryBlogList(param).then(resp => {
        this.blogList = resp.data.list
        this.pTotalSize = Number.parseInt(resp.data.totalSize)
      })
    },
    buildDate(date) {
      const dateObject = new Date(date)
      return dateObject.getTime()
    },
    getProvenance(v) {
      return provenance.get(v)
    },
    expandChange(row, expandedRows) {
      let ex = false
      expandedRows.forEach(data => {
        if (row.id === data.id) {
          ex = true
          return
        }
      })
      if (ex) {
        this.expandRowKeys = []
        this.expandRowKeys.push(row.id)
      }
    },
    handlePublish(index, data) {
      console.log(index, data)
    }
  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
